import React,{useEffect, useState,} from 'react'
import { TabBar } from 'antd-mobile'
import { withRouter,Redirect,Switch,Route } from 'react-router-dom'

import Index from '../../pages/Index'
import Find from '../../pages/Find'
import New from '../../pages/New'
import Profile from '../../pages/Profile'

import './index.scss'

export default withRouter(function Home(props) {
  const {history,location}=props

  const [selectedTab, setSelectedTab] = useState(location.pathname);

  const TaBarList=[
    {
      key:'index',
      title:'首页',
      icon:<i className='iconfont icon-ind'></i>,
      selectedIcon:<i className='iconfont icon-ind'></i>,
      selected:selectedTab==='/home',
      onPress:()=>{setSelectedTab('/home');if(location.pathname!=='/home')history.push('/home')}
    },{
      key:'find',
      title:'找房',
      icon:<i className='iconfont icon-findHouse'></i>,
      selectedIcon:<i className='iconfont icon-findHouse'></i>,
      selected:selectedTab==='/home/find',
      onPress:()=>{setSelectedTab('/home/find');if(location.pathname!=='/home/find')history.push('/home/find')}
    },{
      key:'new',
      title:'资讯',
      icon:<i className='iconfont icon-infom'></i>,
      selectedIcon:<i className='iconfont icon-infom'></i>,
      selected:selectedTab==='/home/new',
      onPress:()=>{setSelectedTab('/home/new');if(location.pathname!=='/home/new')history.push('/home/new')}
    },{
      key:'profile',
      title:'我的',
      icon:<i className='iconfont icon-my'></i>,
      selectedIcon:<i className='iconfont icon-my'></i>,
      selected:selectedTab==='/home/profile',
      onPress:()=>{setSelectedTab('/home/profile');if(location.pathname!=='/home/profile')history.push('/home/profile')}
    }
  ]

  useEffect(()=>{
    setSelectedTab(location.pathname)
  },[location])

  return (
    <div className='home'>
      <div className='tabbar-page'>
          <Switch>
            <Route path='/home' exact component={Index}></Route>
            <Route path='/home/find' component={Find}></Route>
            <Route path='/home/new' component={New}></Route>
            <Route path='/home/profile' component={Profile}></Route>
            <Redirect to='/home'></Redirect>
          </Switch>
      </div>
      <div style={{position: 'fixed', height: '50px', width: '100%', bottom: 0}}>
        <TabBar 
          noRenderContent={true}
          tintColor='#21b97a'
        >
          {
            TaBarList.map(i=>{
              return <TabBar.Item {...i}></TabBar.Item>
            })
          }
        </TabBar>
      </div>
    </div>
  )
})
